hook React
ReactのFunctional ComponentでもState 状態を管理可能に
React 16.8 で追加
関数コンポーネントに State 状態 やReact ライフサイクルといった React の機能を “接続する (hook into)” ための関数
以前はClass Componentでしか State 状態 やReact ライフサイクルを持てなかった
それまでの課題
statefulなロジックのComponent コンポーネント code間でのreusability 再利用性がない
今までの代替
Render Props
HOC Higher Order Component
Hooksがある時
コンポーネントの階層構造を変えることなしに再利用
以前は、ロジックを追加すると階層が増えていた
システムの外に状態やロジックを保つ手段を手に入れた
ロジックのテスト
Component コンポーネント codeの可読性 readabilityがない
State 状態などでごちゃごちゃ
Hooksがある時
関連する機能に基づいて、1 つのコンポーネントを複数の小さな関数に分割することを可能
以前
Class Componentを隠蔽してFunctional Componentが書けるHOC Higher Order ComponentライブラリのRecompose利用してた
Render Propsの利用
Common Hooks
👀useState hooks
👀useEffect hooks
👀useContext hooks
👀useCallback hooks
👀useMemo hooks
👀useRef hooks
👀useReducer hooks
custom hooks
参考
Getting Started – React